<template>
	<view class="page">
		<view style="margin-top: 200rpx;" class="noticeBar">
			<text style='font-size: 38rpx;margin-top: 60rpx;margin-bottom: 30rpx;'>下单须知</text>
			<view class="noticeList" v-for="item in noticeText" :key="item">
				<view class="circle" style="margin-top: 30rpx;"></view>
				<view style="margin-top: 20rpx;">{{item.split('.')[1]}}</view>
			</view>
			<view style="margin-top: 400rpx;display: flex;flex-direction: column;align-items: center;">
				<u-button type="primary" :disabled="buttonDisabled" @click="nextStep">我已知悉，下一步</u-button>
				<view v-if='buttonDisabled' style="margin: 20rpx;display: flex;color:grey;align-items: center;">
					
					<u-count-down ref="countDown" :time="6* 1000" format="ss" autoStart millisecond
						style="color: #f8f8f8;" @change="onChange">
					</u-count-down>
					<view>
						秒后，方可继续下单
					</view>
					
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				buttonDisabled: true,
				noticeText: []
			}
		},
		onShow() {
			this.getNotice()
		},
		onLaunch() {

		},
		methods: {
			getNotice() {
				this.noticeText = []
				uni.$u.http.get('/dataDetail/selectNotice').then(res => {
					res.map(el => {
						this.noticeText.push(el.noticeContent);
					})

				})
			},
			onChange(val) {
				if (val.seconds === 0) {
					this.buttonDisabled = false
				}
			},
			nextStep() {
				 
				uni.setStorage({
				  key: 'notice',
				  data: true,
				  success: function () {
				    uni.switchTab({
				    	url: '/pages/index/index'
				    })
				  },
				  fail: function (error) {
				    console.log('数据存储失败：', error);
				  }
				});
				 
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noticeBar {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.circle {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		background-color: #13989a;
	}

	.noticeList {
		display: flex;
		width: 80%;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 28rpx;
	}
</style>